<!DOCTYPE html>

<html lang="en">
  <head>
  	<title>弹框插件</title>
    <meta charset="utf-8">
</head>
<body>
<script language="javascript" src="js/jquery-1.11.1.js"></script>
<script language="javascript" src="js/jquery.easydrag.handler.beta2.js"></script>

<style type="text/css">
	/* 弹出框 */
.allupboxbg { width:560px;border-bottom:#f5ecda 2px solid; border-right:#f5ecda 2px solid;
-webkit-box-shadow:
		8px 10px 10px rgba(0,0,0,0.5),
		inset 8px 10px 10px rgba(255,255,255,0.75);
	-moz-box-shadow:
		8px 10px 10px rgba(0,0,0,0.5),
		inset 8px 10px 10px rgba(255,255,255,0.75);
	box-shadow:
		8px 10px 10px rgba(0,0,0,0.5),
		inset 8px 10px 10px rgba(255,255,255,0.75);
}
.allupboxinfo { padding:15px;min-height:50px;height:auto !important;height:50px;}
.allupbox01 {  border:#f3d8b9 1px solid;}
.allupbox01 .upputtitle { height:30px; line-height:30px; background-color:#f59a1f; padding:0px 10px;}
.allupbox01 .upputtitle .l {float: left; font-size:14px; font-weight:bold; color:#fff;}
.allupbox01 .upputtitle .r{float: right;}
.allupbox01 .upputtitle .r a{ width:16px; height:16px; background:url(images/allupbox01_x.jpg) no-repeat; display:block; float:right; margin-top:8px;}
</style>
<script type="text/javascript">
	
	$(document).ready(function() {
		$(".allupboxbg").hide();

		$("#openBox").click(function(event) {
			$(".allupboxbg").show("slow")
			.animate({opacity: "1"});
		});


		$(".upputtitle .r").click(function(event) {
			$(".allupboxbg").hide("slow").animate({opacity: "0"});
		});


		$(".allupboxbg").easydrag();
	});
</script>


<button id="openBox">Open The Box</button>


<div class="allupboxbg">
	<div class="allupbox01">
			<div class="upputtitle">
	        		<div class="l">弹出框1</div>
	                <div class="r"><a href="###"></a></div>
	        </div>
	        <div class="allupboxinfo">
	        
	        </div>
	</div>
</div>

</body>
</html>